<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  },
  date:{
    type: String,
    required: true
  }
})
</script>

<template>
  <div class="item">
    <div class="content">{{ msg }}</div>
    <div class="date">{{ date }}</div>
  </div>
</template>

<style scoped>
.item{
  min-width:16vw;
  max-width:16vw;
  height:4vw;
  display:flex;
  background-color: #fff;
  align-items: center;
  margin-left: -4vw;
  border: #000 0.2px solid;
  border-radius: 0.8vw;
  flex-wrap: wrap;
}
.item:hover{
  background-color:#eee;
}
.item .content{
  display: flex;
  align-items: center;
  justify-content: left;
  font-size: 0.7vw;
  min-width: 14vw;
  color: #000;
  margin-left: 0.5vw;
}
.item .date{
  display: flex;
  min-width: 14vw;
  justify-content: right;
  font-size: 0.7vw;
  color: #000;
  margin-left: 0.5vw;
}
</style>